<template lang="html">
  <div class="info_cont01 bor_top">
    <h4 class="title"><span class="mr15">支付信息</span><span class="title_info">选择分期收款，剩余未收款项可能存在收回风险并需自行承担相关风险及责任，平台对此将不承担任何责任且不会提供任何形式的协助。</span></h4>
    <div class="sub_info_cont01">
      <div class="dd_price_cont01">
        <table class="table_fix table_gray01">
          <colgroup>
            <col style="width:80px;">
            <col style="width:220px;">
            <col style="width:80px;">
            <col>
          </colgroup>
          <tbody>
            <tr>
              <th class="t_l">订单总额</th>
              <td class="t_l gray03" colspan="3"><strong class="price_type02">{{ order.TotalAmount }}</strong>元</td>
            </tr>
            <tr v-for="instalment in instalments">
              <th class="t_l">{{ numberToCn(instalment.PhaseNum) }}期款</th>
              <td class="t_l"><strong>{{ instalment.Percent }}%<span class="ml10">{{ instalment.MayReceive }}元</span></strong></td>
              <th class="t_l">最晚付款</th>
              <td class="t_l">
                <span class="pay_date pay_width07">
                  {{ dateFormat(instalment.LatestPayTime, 'YYYY-MM-DD') }}
                  <em class="ml10">{{ dateFormat(instalment.LatestPayTime, 'HH:mm') }}</em>
                </span>
                <span v-bind:class="{ red: !isPayed(instalment.PaymentStatus), green: isPayed(instalment.PaymentStatus), ml20: true }">
                  {{ isPayed(instalment.PaymentStatus) ? '已付款' : '待付款' }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="mt10"><a href="" class="new_btn grey_btn grey_btn02">修改订单总额</a><a href="" class="ml5 new_btn grey_btn grey_btn02">申请补款</a></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as $helpers from '../utils/helpers'

export default {
  computed: {
    ...mapGetters({
      'order': 'getOrder',
      'instalments': 'getInstalments'
    }),
  },
  methods: {
    numberToCn: $helpers.numberToCn,
    dateFormat: $helpers.timeFormating,
    isPayed: $helpers.isPaymentPayed
  }
}
</script>

<style lang="css">
</style>
